import React from 'react';
import { observer } from 'mobx-react';
import { Table, Modal, message } from 'antd';
import { Action } from 'components';
import { http } from 'libs';
import store from './store';
import CourseForm from './Form';
import QrcodeForm from './Qrcode';

@observer
class CourseTable extends React.Component {
  componentDidMount() {
    store.fetchRecords()
  }

  handleDelete = (text) => {
    Modal.confirm({
      title: '删除确认',
      content: `确定要删除课程【${text['name']}】?`,
      onOk: () => {
        return http.delete(`/api/course/${text.id}/`)
          .then(() => {
            message.success('删除成功');
            store.fetchRecords()
          })
      }
    })
  };

  render() {
    return (
      <React.Fragment>
        <Table
          rowKey="id"
          loading={store.isFetching}
          dataSource={store.records}
          rowSelection={{
            selectedRowKeys: store.selectedRows.map(x => x.id),
            onChange: (_, rows) => store.selectedRows = rows
          }}
          pagination={false}>
          <Table.Column title="学校" render={info => info.category_info.school}/>
          <Table.Column title="课程大类" render={info => info.category_info.name}/>
          <Table.Column title="课程名称" dataIndex="name"/>
          <Table.Column title="课程年份" dataIndex="year"/>
          <Table.Column title="课程价格" dataIndex="price"/>
          <Table.Column title="课程类别" dataIndex="category_info" render={info => info.name}/>
          <Table.Column title="开始日期" dataIndex="start_date"/>
          <Table.Column title="结束日期" dataIndex="end_date"/>
          <Table.Column title="状态" dataIndex="status_alias"/>
          <Table.Column title="操作" render={info => (
            <Action>
              <Action.Button auth="course.edit" onClick={() => store.showForm(info)}>编辑</Action.Button>
              <Action.Button auth="course.del" danger onClick={() => this.handleDelete(info)}>删除</Action.Button>
            </Action>
          )}/>
        </Table>
        {store.formVisible && <CourseForm/>}
        {store.qrcodeVisible && <QrcodeForm/>}
      </React.Fragment>
    )
  }
}

export default CourseTable
